var arr = new Array();
var arr1 = new Array();
for(var i=0;i<5;i++){
    arr[i] = i;
}
for(var i=9;i>=0;i--){
    arr1[i] = i;
}
console.time("rub.js time");
var rub=new window.Rub({
    el:'app',
    debug:1,
    template:`
<div>
    <div class="form">
        <h1>表单</h1>
        <p >单个复选框：</p>
        <block r-for="arr3">
            <input type="text" re-blur="getBlur"  r-m="item.name" r-class="{red:!/^[0-9]\\d*$/.test(item.name)}"/>
            {{item.name}}<br/>
        </block>
        <input type="checkbox" id="checkbox" r-m="checked">
        <label for="checkbox">{{ checked }}</label><br/>
        <textarea ref="text" r-m="tvalue" placeholder="哈哈哈"></textarea>
        <br/>{{father.name}}<br/>
        <label for="checkbox">{{ tvalue }}</label><br/>
        <input r-m="inputVal" />
        <label for="checkbox">{{ inputVal }}</label><br/>
        <input type="checkbox"  r-m="checkedArr" value="1">1
        <input type="checkbox"  r-m="checkedArr" value="2">2
        <input type="checkbox"  r-m="checkedArr" value="3">3
        <input type="checkbox"  r-m="checkedArr" value="4">4
        <label for="checkbox">{{ checkedArr }}</label><br/>
        <div id="example-4">
            <input type="radio" id="one" name='aaa' value="One" r-m="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" name='aaa' value="Two" r-m="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
        <div id="example-8">
            <select r-m="selected3">
                <option value="" disabled>请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected3 }}</span>
        </div>
        <div id="example-5">
            <select r-m="selected">
                <option value="" disabled>请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
        <div id="example-6">
            <select r-m="selected1">
                <option value="" disabled>请选择</option>
                <block r-for="item,index in options">
                    <option :value="item.value">{{item.text}}</option>
                </block>
            </select>
            <span>Selected: {{ selected1 }}</span>
        </div>
        <div id="example-7">
            <select r-m="selected2" multiple='multiple' style="width: 100px;height: 200px;">
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                    <option>E</option>
                    <option>D</option>
                    <option>F</option>
            </select>
            <span>Selected: {{ selected2 }}</span>
        </div>
    </div>
    
    <div style="float:left;;border-width:1px;border-color:#000;border-style:solid;">
        <h1>事件变量的处理、计算属性、双向绑定</h1>
        请输入我的名字<br/>
        <input  type="text" r-m.stop="name" value='22'/><br/>
        我的名字是：<span>{{name}}</span><br/>
        我的生日是：<span>{{birthday}}</span><br/>
        我的年龄是：{{age}}{{birthday}}<br/>
        <div style="margin-top:20px;color:blue">
            关系（计算属性）：<span>{{relationship1}}</span><br/>
            姓名是：<span>{{father.name}}</span><br/>
            年龄是：<span>{{father.age}}</span>
        </div>
        <div style="margin-top:20px;color:red">
            关系（计算属性）：<span>{{relationshi2}}</span><br/>
            姓名是：<span>{{father.father.name}} </span><br/>
            年龄是：<span>{{father.father.age}}{{.father.father.age}}</span>
        </div>
        <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange">{{name}}我长大了,我今年{{age}}</a>
        <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange(2,'aaaa',6,7)">我长大2岁</a>
        <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange(step,2)">我长大{{step}}岁</a>
        <a style="display:block;padding-top:20px;color:black" re-click.stop="canIchange(father.age,2)">我长大n岁</a>
    </div>
    <div class="hello seeyou">
        <h1>class绑定</h1>
        <h1 re-click="changeColor" class="hi aaa1" r-class="[className1,className2]">我是啥颜色？数组语法</h1>
        <h1  class="hi" r-class="{red:name=='小明',blue:name=='小明1',className3}">我是啥颜色？对象语法</h1>
    </div>
    <div class="hello seeyou">
        <h1>style绑定</h1>
        <h1 re-click="changeColor" style="height:90px" class="hi aaa1" r-style="[styleObj,styleObj1,'width:200px']">我是啥颜色？数组语法</h1>
        <h1 re-click="changeColor" style="height:100px" class="hi" r-style="{font-size:newName+1+'px',color:'green'}">我是啥颜色？对象语法</h1>
        <h1 re-click="changeColor" style="height:100px" class="hi" r-style="styleObj">我是啥颜色？单对象语法</h1>
    </div>
    <div style="float:left;border-width:1px;border-color:#000;border-style:solid;">
        <h1>表达式</h1>
        <span>newName + 1 =  {{ newName*1 + 1}}   你猜等于：{{ newName + 1}} ？</span>
        <span>混淆表达式{{ '{{newName + 1}}'}} {{{{newName + 1}}}}</span>
    </div>
    <div style="float:left;border-width:1px;border-color:#000;border-style:solid;">
        <h1 re-click="changeNum()">循环</h1>
        <div r-for="arr" style="display: inline-block;" >
            <span  style="margin-right:10px;" r-for="item1,index1 in arr1">{{item}}*{{item1}}</span>
            <span  style="margin-right:10px;" r-for="item4,index4 in arr2">{{item4.name}}</span>
        </div>
        <block r-for="item,index in arr2"><span r-if="index%2==0" style="margin-right:10px;">{{item.name}}</span></block>
    </div>
    <div style="float:left;border-width:1px;border-color:#000;border-style:solid;">
        <h1 r-if="'小明'==name">r-if="'小明'==name"</h1>
        <h1 r-elif="'小明1'==name">r-elif="'小明1'==name"</h1>
        <h1 r-elif="'小明2'==name">r-elif="'小明2'==name"</h1>
        <h1 r-else>r-else</h1>
        <h1 r-show="'小明'==name" style="color:red;background:blue;display:block;">我是r-show，条件是'小明'==name</h1>
    </div>
    <img style="width:200px;height:200px" src="http://img.zcool.cn/community/018dbd591ac1edb5b3086ed42b91de.jpg" />
    <img style="width:200px;height:200px" :src="cartImg" />
</div>
`,
    data:{
        inputVal:'0',
        checkedArr:['1','3'],
        checked:true,
        picked:'One',
        selected:'',
        selected3:'C',
        cartImg:'',
        options:[{text:'apple',value:'A'},
            {text:'sydney',value:'B'},
            {text:'apple',value:'C'},
        ],
        selected1:'C',
        tvalue:'好东西',
        className1:'red',
        className2:'small',
        newName:'1',
        name:'小明',
        age:18,
        color:'green',
        birthday:'1991/01/01',
        step:3,
        father:{
            name:'小明他爸',
            age:45,
            father:{
                bbb:null,
                name:'小明的爷爷',
                age:76
            }
        },
        selected2:[],
        arr:arr,
        arr1:[4,5,6],
        arr2:[{name:'好'},{name:'好1'},{name:'好2'},{name:'好3'},{name:'好4'},{name:'好5'},{name:'好6'}],
        arr3:[{name:'1'},{name:'2'},{name:'3'},{name:4},{name:5},{name:6}]
    },
    calc:{
        className3(){
            return 'yellow'
        },
        relationship1(){
            return this.data.name+"的爸爸"
        },
        relationshi2(){
            return this.data.name+"的爷爷"
        },
        styleObj(){
            return {
                color:'red',
                'font-size':'16px'
            }
        },
        styleObj1(){
            return {
                'background-color':'black'
            }
        }
    },
    watcher:{
        'data.arr'(newVlue,value){
            console.log("属性变化----------:",newVlue,value)
        },
        'data.father'(newVlue,value){

            console.log("属性变化----------:",newVlue,value)
        },
        'data.father.father.age'(newVlue,value){
            console.log("属性变化----------:",newVlue,value)
        }
    },
    beforeUpdate(vdom){
       
    },
    create(){
        // console.log(this['arr'])
    },
    ready(){
        setTimeout(() => {
            this.data.cartImg='http://t2.hddhhn.com/uploads/tu/201610/198/scx30045vxd.jpg'
            this.data.arr[1]=99
        }, 2000);
        
    },
    method:{
        getBlur(e){
           
        },
        changeColor(){

            if(this.data.className1=='red'){
                this.data.className1='blue'
                this.data.className2='big'
            }else{
                this.data.className1='red'
                this.data.className2='small'
            }
        },
        changeNum(){
            // this.data.arr[8]=2
            // this.data.arr.splice(1,1)
            // this.data.arr=[1,1,1,1,2,1]
            if(this.data.arr.length<5)
                this.data.arr=[1,1,1,1,2,1]
            else{
                this.data.arr.splice(1,1)
            }
        },
        canIchange(num,e){
            // console.log("````````````````````````````````",num)
            if(typeof num=='object')num=1
            // this.data.age+=num;
            // this.data.father.age+=num;
            this.data.father.father.age+=num;
            setTimeout(() => {
                this.data.father=null;
            }, 2000);
            setTimeout(() => {
                this.data.father={
                    name:'小明他爸神经病',
                    age:50,
                    father:{
                        bbb:null,
                        name:'小明的爷爷',
                        age:80
                    }
                }
            }, 4000);
            
            setTimeout(() => {
                this.data.father.father.age+=num;
            }, 6000);
        }
    }
})
console.timeEnd("rub.js time");